<!-- 控制台 -->
<template>
    <MenuPage title="控制台" divider>
        <template slot="search">
            <!-- <span v-if="contentDetail.accessName"
                    >接入机器：<Tag color="geekblue">{{ contentDetail.accessName }} </Tag></span
                > -->
            <SaveExper
                v-if="generateImageList.length > 0"
                style="display: inline-block"
                @getExperStatus="getContentDetail"
                showSave
            ></SaveExper>
            <TopoTemplate
                v-else
                style="display: inline-block"
                onlyGenerateTemplate
                @on-success="updateTemplate"
            ></TopoTemplate>
        </template>
        <template slot="content">
            <div>
                <EnvironDesignModal v-show="!contentDetail.projectId"></EnvironDesignModal>
                <div class="flex-between" v-show="contentDetail.projectId">
                    <EnvironDeploy
                        showType="1"
                        ref="vm-statistics"
                        style="width: calc(100% - 300px)"
                        v-if="contentDetail.projectId"
                    ></EnvironDeploy>
                    <div class="deploy-wrapper">
                        <Progress
                            v-if="contentDetail.process > 0 && contentDetail.process < 100"
                            :percent="contentDetail.process"
                            status="active"
                            style="width: 100%"
                        ></Progress>
                        <div class="flex">
                            <div class="deploy-record">
                                <EnvironDeploy
                                    showType="2"
                                    v-if="contentDetail.projectId"
                                ></EnvironDeploy>
                            </div>
                            <Tag color="primary"
                                ><Icon type="ios-stats" class="mr5" />{{
                                    contentDetail.statusCHName
                                }}</Tag
                            >
                            <WarningTip
                                v-if="showDeployTip"
                            >
                              <span v-html="contentDetail.errorMessage || '失败原因请查看部署记录中的详情信息'"></span>
                            </WarningTip>
                            <Button
                                size="small"
                                type="text"
                                @click="deploy()"
                                v-if="contentDetail.projectId"
                                :disabled="!showDeployBtn"
                                >部署</Button
                            >
                            <Poptip
                                confirm
                                transfer
                                title="您确定要清空当前工程吗？"
                                @on-ok="clearDeploy"
                            >
                                <Button
                                    size="small"
                                    type="text"
                                    v-if="contentDetail.projectId"
                                    :disabled="!showClearDeployBtn"
                                    >清空部署</Button
                                >
                            </Poptip>
                        </div>
                    </div>
                </div>
            </div>
            <p v-if="gitInfo.userName && contentDetail.deployStatus === 3 && (contentDetail.envStatus == 1 || contentDetail.envStatus == 3)" class="git-wrap">
                <span>代码库访问地址：<a :href="gitInfo.gitServerUrl" target="_blank">{{ gitInfo.gitServerUrl }}</a></span></a>
                <Divider type="vertical"></Divider>
                <span>用户名：{{ gitInfo.userName }}</span>
                <Divider type="vertical"></Divider>
                <span>密码：{{ gitInfo.password }}</span>
            </p>
            <Row class="mt10 environ-wrapper" v-if="contentDetail.projectId">
                <Col span="3" class="op-wrapper">
                    <ul>
                        <li
                            class="op-item"
                            v-for="tab in showOpTabList"
                            :key="tab.name"
                            :class="{ active: tab.name === curOpTab }"
                            @click="changeOpTab(tab.name)"
                        >
                            {{ tab.title }}
                        </li>
                    </ul>
                </Col>
                <Col span="21" class="content-wrapper">
                    <Card
                        v-if="contentDetail.projectId && curOpTab === 'design'"
                        dis-hover
                        :bordered="false"
                        class="no-padding hp100"
                        :class="{ 'full-screen': fullShow.topo }"
                    >
                    <!-- 'full-screen-topo': fullShow.topo -->
                        <template #title
                            >拓扑<small style="color: #f90"
                                >（编辑拓扑后请保存科研）</small
                            ></template
                        >
                        <template #extra>
                            <div class="flex pointer extra" v-show="contentDetail.networkId">
                                <!-- <span @click="openCmdModal()" class="flex pointer icon-wrapper ml10"
                                    ><span class="edit mr5"></span>执行命令</span
                                >
                                <span @click="openProtocolModal()" class="flex pointer icon-wrapper ml10"
                                    ><span class="edit mr5"></span>数据通道</span
                                >
                                <span @click="openLinkCheckModal()" class="flex pointer icon-wrapper ml10"
                                    ><span class="link mr5"></span>连通性校验</span
                                > -->
                                <span @click="refreshTopo" class="flex pointer icon-wrapper"
                                    ><Icon :size="30" type="ios-refresh" style="position:relative;"/>刷新</span
                                >
                                <span @click="gotoEdit" class="flex pointer icon-wrapper ml10"
                                    ><span class="edit mr5"></span>自定义编辑</span
                                >
                                <span
                                    @click="fullScreen('topo')"
                                    class="flex pointer icon-wrapper ml10"
                                    ><span class="screen mr5"></span>{{fullShow.topo ? '取消全屏' : '全屏查看'}}</span
                                >
                            </div>
                        </template>
                        <!-- /ky-topologyProject/index.html -->
                        <Spin fix v-show="!load.topo" style="height: 100%">
                            <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
                            <div>加载中...</div>
                        </Spin>
                        <iframe
                            id="topoIframe"
                            :src="`/ky-topologyProject/index.html#/topologyDisplay/preview?projectId=${
                                contentDetail.projectId
                            }&ecId=${contentDetail.id}&ecName=${contentDetail.name}&type=${
                                fullShow.topo ? 'edit' : 'view'
                            }`"
                            width="100%"
                            :height="fullShow.topo ? '100%' : '100%'"
                            scrolling="none"
                            frameborder="0"
                            @load="loadSuccess('topo')"
                            @error="loadSuccess('topo')"
                        ></iframe>
                    </Card>
                    <EnvironManage
                        :prjId="contentDetail.projectId"
                        v-if="contentDetail.projectId && curOpTab === 'manage'"
                    >
                        <!-- <Button
                            type="primary"
                            size="small"
                            style="margin: 9px 10px 0 0"
                            @click="imageModal = true"
                            >镜像生成列表</Button
                        > -->
                    </EnvironManage>
                    <!--  v-show="false" -->
                    <!-- @setImageList="getImageList" -->
                    <!-- 文档和视频 -->
                    <DocInfo v-if="curOpTab === 'res'" showType="1" ref="docInfo1"></DocInfo>
                    <jupyter v-if="curOpTab === 'code'"></jupyter>
                    <!-- <traffic v-if="curOpTab === 'flow'"></traffic> -->
                    <!-- <TrafficRetrieval :prjId="contentDetail.projectId"
                        :sceneId="contentDetail.sceneId"
                        :contentName="contentDetail.name" v-if="curOpTab === 'flow'"></TrafficRetrieval> -->
                    <Task v-if="curOpTab === 'task'" :projectId="contentDetail.projectId"
                        :sceneId="contentDetail.sceneId"></Task>
                    <!-- <Card'
                        v-if="curOpTab === 'res'"
                        dis-hover
                        class="no-padding"
                        style="height: 400px"
                    >
                        <DocInfo showType="1" ref="docInfo1"></DocInfo>
                    </Card> -->
                </Col>
            </Row>
        </template>
        <Modal title="镜像生成列表" v-model="imageModal" :width="1100" footer-hide>
            <ImageList ref="imageList" v-if="contentDetail.projectId"></ImageList>
        </Modal>
        <!-- <Modal v-model="linkCheckModal.show" title="连通性校验" :width="1100" footer-hide>
            <LinkCheck :projectId="contentDetail.projectId"
                        :sceneId="contentDetail.sceneId" v-if="linkCheckModal.show"></LinkCheck>
        </Modal>
        <Modal v-model="protocolModal.show" title="数据通道" :width="1400" footer-hide>
            <Protocol :projectId="contentDetail.projectId"
                        :sceneId="contentDetail.sceneId" v-if="protocolModal.show"></Protocol>
        </Modal>
        <Modal v-model="vmcmdModal.show" title="执行命令" :width="1400" footer-hide>
            <Vmcmd :projectId="contentDetail.projectId"
                        :sceneId="contentDetail.sceneId" v-if="vmcmdModal.show"></Vmcmd>
        </Modal> -->
    </MenuPage>
</template>

<script>
// import PageLayout from '@/components/common/page';
import DocInfo from './docInfo';
import EnvironDesignModal from './environDesign.vue';
import ImageList from './environ/createImageList';
import SaveExper from './environ/saveExper1';
import EnvironManage from './environManage';
import NoData from '@/components/common/no-data';
import { getContentDetail, updateContent } from '../api/content.js';
import { getReportList } from '../api/report.js';
import { getGitInfo } from '../api/gitManage.js';
import { selectStatus } from '../api/environment.js';
import {
    deployProject,
    queryProjectstatus,
    getDeployProgress,
    clearDeloyPro,
    getTestList,
    queryNetworkList,
} from '../api/deploy.js';
import TopoTemplate from './template/topo-template';
import replaceTemplateMixin from './mixins/replace-template.js';
// import NoData from '@/components/common/no-data';
import EnvironDeploy from './environDeploy.vue';
import jupyter from '../jupyter';
// import traffic from './traffic'
// import TrafficRetrieval from './traffic/trafficRetrieval.vue';
// import LinkCheck from './task/linkCheck.vue'
// import Protocol from './task/protocol.vue'
// import Vmcmd from './task/vmcmd.vue'
import Task from './task'
import { mapMutations } from 'vuex';
export default {
    name: 'Design',
    components: {
        // PageLayout,
        EnvironDesignModal,
        SaveExper,
        ImageList,
        NoData,
        DocInfo,
        TopoTemplate,
        EnvironDeploy,
        EnvironManage,
        jupyter,
        // traffic,
        // TrafficRetrieval,
        Task
        // LinkCheck,
        // Protocol,
        // Vmcmd
    },
    provide() {
        return {
            detailParent: this,
        };
    },
    mixins: [replaceTemplateMixin],
    data() {
        return {
            imageModal: false,
            contentDetail: { id: '', name: '', tmplId: '', statusCHName: '未部署' },
            designModal: {
                show: false,
                title: '环境设计',
            },
            fullShow: {
                topo: false,
                process: false,
                code: false,
            },
            load: {
                topo: false,
                process: false,
            },
            topoIframeHeight: '400px',
            screenImgSrc: require('../assets/research/screen.png'),
            screenHoverImgSrc: require('../assets/research/screenOut.png'),
            showDeployTip: false,
            curOpTab: 'design',
            gitInfo: {},
            linkCheckModal:{
                show:false
            },
            protocolModal:{
                show:false
            },
            vmcmdModal:{
                show:false
            }
        };
    },
    computed: {
        deployStatus() {
            return this.contentDetail.deployStatus;
        },
        envStatus() {
            return this.contentDetail.envStatus;
        },
        showUnDeployBtn() {
            return [9, 13, 4].includes(this.deployStatus);
        },
        showDeployBtn() {
            return [0, -2, 3, 6, 14, 8].includes(this.deployStatus);
        },
        showClearDeployBtn() {
            return [3, 6, 14, 8].includes(this.deployStatus);
        },
        generateImageList() {
            return this.contentDetail.generateImageList || [];
        },
        showOpTabList() {
            return this.opTabList.filter((item) => item.show != false);
        },
        opTabList() {
            return [
                {
                    name: 'design',
                    title: '环境设计',
                    show: this.contentDetail.projectId,
                },
                {
                    name: 'code',
                    title: '编程环境',
                    show:
                        this.contentDetail.projectId &&
                        this.contentDetail.deployStatus === 3 &&
                        [1, 2, 3].includes(this.envStatus),
                },
                {
                    name: 'manage',
                    title: '环境管理',
                    show: this.contentDetail.projectId,
                },
                // {
                //     name: 'flow',
                //     title: '流量展示',
                //     show: this.contentDetail.projectId,
                // },
                {
                    name: 'res',
                    title: '资源管理',
                },
                {
                    name:'task',
                    title:'本地工具库',
                    show: this.contentDetail.projectId
                }
                // {
                //     name:'process',
                //     title:'科研流程'
                // }
            ];
        },
    },
    watch: {
        deployStatus(val, oldVal) {
            if (val === 3) {
                this.getContentDetail('poll');
            }
        },
    },
    async mounted() {
        let _this = this;
        // window.cancelFullScreen = () => {
        //     console.log('取消全屏');
        //     if (!_this.fullShow['topo']) {
        //         return;
        //     }
        //     _this.fullShow['topo'] = false;
        //     // document.getElementById('topoIframe').contentWindow.changeShowType('view');
        // };
        document.addEventListener('visibilitychange', this.handleVisible);
        if (!this.$route.query.id) {
            return;
        }
        this.getGitInfo();
        await this.getContentDetail();
        this.addBreadItem({
            name: this.contentDetail.name,
        });
    },
    beforeDestroy() {
        clearTimeout(this.progressTimeout);
        clearTimeout(this.statusTimeout);
        clearTimeout(this.sceneTimeout);
        clearInterval(this.detailTimeout);
        document.removeEventListener('visibilitychange', this.handleVisible);
    },
    methods: {
        ...mapMutations(['addBreadItem']),
        changeOpTab(value) {
            this.curOpTab = value;
        },
        handleVisible() {
            if (document.visibilityState === 'visible') {
                if (this.contentDetail && this.contentDetail.projectId) {
                    this.$refs['imageList'] && this.$refs['imageList'].getCreateImageList();
                    // this.load = {
                    //     topo: false,
                    //     process: false
                    // };
                    // document.getElementById('topoIframe') &&
                    //     document.getElementById('topoIframe').contentWindow.location.reload(true);
                    // document.getElementById('processIframe') &&
                    //     document
                    //         .getElementById('processIframe')
                    //         .contentWindow.location.reload(true);
                    this.getContentDetail();
                }
            } else {
            }
        },
        getImageList() {
            this.$refs['imageList'] && this.$refs['imageList'].getCreateImageList();
        },
        getContentDetail(type) {
            if (!this.$route.query.id) {
                return;
            }
            return new Promise((resolve, reject) => {
                getContentDetail(this.$route.query.id).then(({ code, data: detail }) => {
                    if (code === 1) {
                        if (this.contentDetail.id) {
                            this.contentDetail = { ...this.contentDetail, ...detail };
                        } else {
                            this.contentDetail = detail;
                        }
                        this.contentDetail.prjId = this.contentDetail.projectId;
                        if (!this.contentDetail.projectId) {
                            this.contentDetail.imageList = [];
                        }
                        // this.getRepTemplateList();
                        if (type !== 'poll') {
                            this.queryProjectstatus();
                        } else {
                            if ([0, 2].includes(this.contentDetail.envStatus)) {
                                this.detailTimeout = setTimeout(() => {
                                    this.getContentDetail('poll');
                                }, 5000);
                            } else {
                                clearTimeout(this.detailTimeout);
                            }
                        }
                        // this.getExperStatus();
                        // this.getReportList();
                        resolve();
                    }
                });
            });
        },
        getTestList(projectId) {
            clearTimeout(this.sceneTimeout);
            getTestList(projectId).then(({ code, data, message }) => {
                if (code === 1) {
                    if (data.items.length > 0) {
                        this.contentDetail.sceneId = data.items[0].id;
                    } else {
                        this.sceneTimeout = setTimeout(() => {
                            this.getTestList(projectId);
                        }, 3000);
                    }
                }
            });
        },
        getNetworkList(projectId, networkId) {
            queryNetworkList(projectId, networkId).then(({ code, attribute = {} }) => {
                if (code === 1 && attribute.editorStage && attribute.editorStage.deviceNum) {
                    this.updateDetail({
                        hasNode: true,
                    });
                }
            });
        },
        getExperStatus() {
            return new Promise((resolve) => {
                selectStatus(this.contentDetail.id)
                    .then(({ code, data, message }) => {
                        let { projectId, deployStatus } = data;
                        this.updateDetail({ deployStatus, prjId: projectId });
                        resolve();
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            });
        },
        getReportList() {
            let params = {
                contentId: this.contentDetail.id,
                pageIndex: 1,
                pageSize: 1,
            };
            getReportList(params).then((res) => {
                if (res.code == 1) {
                    this.updateDetail({ summaryTotal: res.data.total });
                }
            });
        },
        updateDetail(data) {
            this.contentDetail = { ...this.contentDetail, ...data };
        },
        updateTemplate(data) {
            this.updateContent({ tmplId: data.id, tmplName: data.name });
        },
        updateContent(data) {
            updateContent(this.contentDetail.id, data)
                .then(({ code, message }) => {
                    if (code === 1) {
                        this.$Message.info('保存成功');
                    } else {
                        this.$Message.error(message);
                    }
                })
                .catch((error) => {});
        },
        // 更新模板信息，创建工程
        createProject() {},
        async deploy() {
            await this.deployProject(this.contentDetail.projectId);
            this.queryProjectstatus();
        },
        deployProject() {
            return new Promise((resolve, reject) => {
                deployProject(this.contentDetail.projectId).then(({ code, data, message }) => {
                    if (code === 1 || code === 3) {
                        resolve(code);
                    } else {
                        this.$Message.warning(message);
                    }
                });
            });
        },
        queryProjectstatus() {
            clearTimeout(this.statusTimeout);
            this.showDeployTip = false;
            if (!this.contentDetail.projectId) {
                return;
            }
            return new Promise((resolve, reject) => {
                queryProjectstatus(this.contentDetail.projectId).then(
                    ({ code, data, message }) => {
                        if (code === 1) {
                            let { project, network } = data;
                            let {
                                id,
                                deployId,
                                status,
                                statusCHName,
                                checkOuts = [],
                                errorMessage,
                            } = project;
                            this.getTestList(id); //获取场景列表
                            // this.getNetworkList(id, network.id); //获取子网络列表
                            this.updateDetail({
                                deployStatus: status,
                                statusCHName: statusCHName,
                                networkId: network.id,
                                errorMessage:errorMessage
                            });
                            if (checkOuts.length != 0) {
                                let errorContent = '';
                                checkOuts.forEach((item,i) => {
                                    item.data.forEach((dataItem,dataIndex) => {
                                        dataItem.deviceName = dataItem.deviceName
                                            ? dataItem.deviceName
                                            : dataItem.networkName;
                                        errorContent +=
                                            dataItem.deviceName +
                                            '中的' +
                                            dataItem.name +
                                            item.message +
                                            '<br/>';
                                    });
                                });
                                // this.$Message.error({
                                //     content: errorContent,
                                //     closable: true,
                                //     duration: 60
                                // });
                                this.showDeployTip = true;
                            } else if (errorMessage) {
                                this.showDeployTip = true;
                                // this.$Message.error({
                                //     content: errorMessage,
                                //     closable: true,
                                //     duration: 30
                                // });
                            } else {
                                if (status === 9 || status === 13) {
                                    //部署中 || 清空部署中
                                    this.getDeployProgress(deployId);
                                } else if (status === 15 || status === 16) {
                                    //校验中
                                    this.statusTimeout = setTimeout(() => {
                                        this.queryProjectstatus();
                                    }, 5000);
                                } else if (status === 3) {
                                }
                            }
                            resolve(project);
                        } else {
                            this.updateDetail({ projectId: '' });
                            code != -2 && this.$Message.warning(message);
                        }
                    }
                );
            });
        },
        getDeployProgress(deployId) {
            clearTimeout(this.progressTimeout);
            return new Promise((resolve, reject) => {
                getDeployProgress(deployId).then(({ code, data, message }) => {
                    let { deployStatus, process } = data;
                    if (code === 1) {
                        this.updateDetail({ process });
                        if (deployStatus === 1) {
                            // 还在部署中，持续获取部署进度
                            if (process != 100) {
                                this.progressTimeout = setTimeout(() => {
                                    this.getDeployProgress(deployId);
                                }, 5000);
                            }
                        } else {
                            // 部署完成
                            this.queryProjectstatus();
                        }
                        resolve(data);
                    } else {
                        this.$Message.warning(message);
                    }
                });
            });
        },
        clearDeploy() {
            // this.loading = true;
            // this.distriTip = '正在清空工程';
            let params = {
                projectId: this.contentDetail.projectId,
            };
            clearDeloyPro(this.contentDetail.projectId, params)
                .then((res) => {
                    if (res.code === 1 || res.code === 3) {
                        this.queryProjectstatus();
                    } else {
                        // this.loading = false;
                        this.$Message.error({
                            content: res.message,
                            duration: 3,
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                    // this.loading = false;
                    this.$Message.error('服务器连接失败！');
                });
        },
        refreshDocInfo() {
            this.$refs.docInfo1.getResourceBind();
            this.$refs.docInfo2.getResourceBind();
        },
        gotoTopo() {
            window.openTrain(
                `http://localhost:8081/#/topologyDisplay/topologys?projectId=${this.contentDetail.projectId}&ecId=${this.contentDetail.id}&ecName=${this.contentDetail.name}`
            );
            // window.openTrain(
            //     `/ky-topologyProject/index.html#/topologyDisplay/topologys?projectId=${this.contentDetail.projectId}&ecId=${this.contentDetail.id}&ecName=${this.contentDetail.name}`
            // );
        },
        gotoEdit() {
            window.openTrain(
                `/14-NetTopology/TopoEdit.html?project=${this.contentDetail.projectId}&networkid=${this.contentDetail.networkId}&hideReturnBtn=true`
            );
            // window.openTrain(
            //     `http://172.172.100.1/14-NetTopology/TopoEdit.html?project=${this.contentDetail.projectId}&networkid=${this.contentDetail.networkId}&fromProject=ky-topologyProject`
            // );
        },
        gotoProcess() {
            // window.openTrain(
            //     `http://172.172.100.1/ky-topologyProject/index.html#/topologyDisplay/processPanel/processControl?projectId=${this.contentDetail.projectId}&sceneId=${this.contentDetail.sceneId}`
            // );
            window.openTrain(
                `/ky-topologyProject/index.html#/topologyDisplay/processPanel/processControl?projectId=${this.contentDetail.projectId}&sceneId=${this.contentDetail.sceneId}`
            );
        },
        refreshTopo() {
            if (!this.load.topo) {
                return;
            }
            this.load.topo = false;
            this.$refs['vm-statistics'].document.getElementById('topoIframe') &&
                document.getElementById('topoIframe').contentWindow.location.reload(true);
        },
        refreshProcess() {
            if (!this.load.process) {
                return;
            }
            this.load.process = false;
            document.getElementById('processIframe') &&
                document.getElementById('processIframe').contentWindow.location.reload(true);
        },
        fullScreen(type) {
            if (type === 'topo') {
                // 调用iframe中的方法
                document.getElementById('topoIframe').contentWindow.changeShowType(this.fullShow[type] ? 'view' : 'edit');
            } else {
                
            }
            this.fullShow[type] = !this.fullShow[type];
        },
        loadSuccess(type) {
            this.load[type] = true;
            if (type === 'code') {
                //不同源无法js交互
                // document.getElementById('codeIframe').contentWindow.document.getElementById('header').style.display = 'none';
            }
        },
        getGitInfo() {
            getGitInfo().then(({ code, data, message }) => {
                if (code == 1) {
                    this.gitInfo = data;
                }
            });
        },
        openLinkCheckModal(){
            this.linkCheckModal.show = true;
        },
        openProtocolModal(){
            this.protocolModal.show = true;
        },
        openCmdModal(){
            this.vmcmdModal.show = true;
        },
    },
};
</script>
<style scoped>
.vm-statistics {
    height: 70px;
    width: 60%;
    /* flex: auto; */
}
.deploy-wrapper {
    align-self: end;
    display: flex;
    flex-direction: column;
    flex: none;
}
.deploy-record {
    height: 22px;
    width: 80px;
    margin-right: 10px;
}
.mr5 {
    margin-right: 5px;
}
.full-screen-topo /deep/ .ivu-card-head {
    display: none;
}
.full-screen-topo /deep/ .ivu-card-body {
    height: 100%;
}
.full-screen #topoIframe {
    height: 100%;
}
.icon-wrapper:hover {
    color: #2d8cf0;
}
.edit,
.link,
.screen {
    width: 20px;
    height: 18px;
    background-size: 20px 18px;
    background-repeat: no-repeat;
}
.edit {
    background-image: url('../assets/research/editor.png');
}
.icon-wrapper:hover .edit {
    background-image: url('../assets/research/editorh.png');
}
.screen {
    background-image: url('../assets/research/screen.png');
}
.icon-wrapper:hover .screen {
    background-image: url('../assets/research/screenh.png');
}
.full-screen .screen {
    background-image: url('../assets/research/screenOut.png');
}
.full-screen .icon-wrapper:hover .screen {
    background-image: url('../assets/research/screenOuth.png');
}

.link {
    background-image: url('../assets/research/link.png');
}
.icon-wrapper:hover .link {
    background-image: url('../assets/research/linkh.png');
}
/deep/.ivu-card {
    border-radius: 0;
}
/deep/.ivu-card.no-padding .ivu-card-body {
    position: relative;
    padding: 0;
    height: calc(100% - 43px);
    min-height: 400px;
}
/deep/.ivu-card.fill-screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.extra {
    position: relative;
    top: -6px;
}
.environ-wrapper {
    width: 100%;
    border: 1px solid #ececec;
    flex: auto;
}
.op-wrapper {
    border-right: 1px solid #ececec;
}
.op-item {
    padding: 14px 30px 10px;
    cursor: pointer;
    font-size: 16px;
}
.op-item.active {
    font-size: 18px;
    font-weight: bold;
}
.git-wrap {
    padding: 10px;
    margin-top: 10px;
    background: #f4f7ff !important;
}
</style>
